<template>
	<view class="search-wrap">
		<div class="input-wraper">
			<span class="icon iconfont">&#xe629;</span>
			<input class="input" focus placeholder="搜索歌手,歌曲,专辑" @confirm="goToSearch" v-model="searchInputKeyWord" />
		</div>
		<musicList :musicArrayData="searchResult" v-if="searchResult.length>0"></musicList>
		<div v-else>
			<div class="hot-wraper">
				<p class="title">热门搜索</p>
				<div>
					<ul class="hot-group">
						<li class="hot-search-item" v-for="(item,index) in hotSearchList" :key="index" @click="toHotSearch(item)">
							<span class="searchWord">{{item.searchWord}}</span>
							<image class="item-icon" :src="item.iconUrl" alt="" v-if="item.iconUrl"></image>
						</li>
					</ul>
				</div>
			</div>
			<div class="search-history-wraper">
				<p class="title">历史搜索</p>
				<div>
					<ul class="search-history-group">
						<li class="search-history-item" v-for="(item,index) in historyString" :key="index" @click="toHotSearch(item)">
							<div>
								<span class="icon iconfont history">&#xe602;</span>
								<span class="searchWord">{{item}}</span>

							</div>
							<!-- <span class="icon iconfont delete">&#xe65d;</span> -->
						</li>
					</ul>
				</div>
				<p class="clearHistory" @click="cleanSearchHisory"><span class="icon iconfont" >&#xe65d;</span>清除搜索记录</p>
			</div>
		</div>

	</view>
</template>

<script>
	import musicList from "../../components/music-list.vue"
	export default {
		data() {
			return {
				hotSearchList: [],
				searchInputKeyWord: "",
				searchResult: [],
				historyString: [],
			}
		},

		watch: {
			searchInputKeyWord() {
				if (this.searchInputKeyWord == "") {
					this.searchResult = []
				}
			}
		},
		components: {
			musicList
		},
		methods: {
			cleanSearchHisory(){
				const _this= this;
				uni.showModal({
					title:'确定清空搜索历史吗？',
					success(info){
						if(info.confirm){
							uni.clearStorage().then(res=>{
								_this.getHistoryList()
							})
							uni.showToast({
								title:"清除成功！",
								icon:'none'
							})
						}
					}
				})
			},
			async getHotSearch() {
				const res = await this.rq.fetchGet(this.apiUrl.hotSearch, {});
				this.hotSearchList = res[1].data.data;
			},
			toHotSearch(item) {
				if (item.searchWord) {
					this.searchInputKeyWord = item.searchWord;
				} else {
					this.searchInputKeyWord = item;
				}

				this.goToSearch();
			},
			async getHistoryList() {
				const historyData = await uni.getStorage({
					key: "searchHistoryList"
				})
				if (historyData[1]) {

					let data
					data = historyData[1].data;

					data = data.split(",").filter(item => item !== "")

					this.historyString = data;

				}else{
					this.historyString= []
				}
			},
			async goToSearch() {
				if (this.searchInputKeyWord !== "") {
					const res = await this.rq.fetchGet(this.apiUrl.searchSongs, {
						keywords: this.searchInputKeyWord
					})
					this.searchResult = res[1].data.result.songs.map(item => {
						return {
							song: item,
							id: item.id,
							name: item.name
						}
					})
					const hasHistory = await uni.getStorage({
						key: "searchHistoryList"
					})
					if (hasHistory[0]) {
						uni.setStorage({
							key: "searchHistoryList",
							data: this.searchInputKeyWord + ","
						})
					} else {
						console.log(hasHistory[1].data.indexOf(this.searchInputKeyWord) < 0)
						if (hasHistory[1].data.indexOf(this.searchInputKeyWord) < 0) {
							uni.setStorage({
								key: "searchHistoryList",
								data: hasHistory[1].data + this.searchInputKeyWord + ","
							})
						}
						this.getHistoryList()
					}
				} else {
					uni.showToast({
						title: "搜索关键词为空",
						icon: "none"
					})
				}
			}
		},

		created() {
			this.getHotSearch();
			this.getHistoryList()
		}
	}
</script>

<style lang="scss">
	.search-wrap {
		margin: .5rem 0px;

		.title {
			color: gray;
			font-size: .8rem;
			margin: 1rem 0px;
		}

		.input-wraper {
			display: flex;
			align-items: center;
			margin: 1rem;
			padding: .4rem;
			background-color: lighten(gray, 45%);
			border-radius: 25px;

			.input {
				width: 90%;
			}

			.icon {
				margin-right: .3rem;
			}
		}

		.hot-wraper {
			border-top: 1px solid lighten(gray, 30%);


			.hot-group {
				display: flex;
				flex-wrap: wrap;
				list-style: none;

				.hot-search-item {
					font-size: .4rem;
					margin: .3rem;
					border: 1px solid lighten(gray, 30%);
					padding: .4rem;
					border-radius: 20px;
					text-align: center;

					.searchWord {}

					.item-icon {
						vertical-align: top;
						width: 1rem;
						height: .7rem;
					}
				}
			}
		}

		.search-history-wraper {
			width: 100%;

			.search-history-group {
				.search-history-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: lighten(gray, 5%);
					margin: .8rem 0;
					font-size: .7rem;
					border-bottom: 1px solid lighten(gray, 45%);
					.delete{
						font-size: 1rem;
					}
					.history {
						margin-right: .2rem;
						font-size: .6rem;
					}
				}
			}
			.clearHistory{
				font-size: .7rem;
				text-align: center;
				color: lighten(gray, 15%);
				padding: .6rem;
			}
		}
	}
</style>
